<template>
  <view class="searchDetail">
    <shopro-navbar>
      <view
        slot="content"
        :class="hoverInput == true ? 'inputSousuo' : 'sousuo'"
      >
        <view class="sousuo_ico"><u-icon name="search"></u-icon></view>
        <view class="sousuo_input">
          <input
            class="input"
            type="text"
            @blur="hoverInput = false"
            v-model="searchWord"
            confirm-type="search"
            @focus="hoverInput = true"
            @confirm="searchHandle(searchWord)"
          />
        </view>
      </view>
    </shopro-navbar>
    <!-- 一级筛选 -->
    <view class="top_tab">
      <u-tabs
        :list="firstList"
        :is-scroll="true"
        :current="current"
        @change="change"
        active-color="#3D3D3D"
        inactive-color="#939393"
        height="60"
        gutter="22"
        :bar-style="bar_style"
        :active-item-style="active_item"
      ></u-tabs>
    </view>
    <view class="main">
      <scroll-view
        scroll-y="true"
        @scrolltolower="loadMore"
        :enable-flex="true"
        class="scroll-box"
      >
        <view class="scroll">
          <view
            class="box"
            v-for="(item, index) in boxList"
            :key="index"
            @tap="jumpPage(item)"
          >
            <img :src="item.cover_image" alt="" class="img" />
            <view class="text">{{ item.title }}</view>
            <view class="price">
              <view class="new_price">
                <view class="bq">￥</view>
                <view class="jiage">{{ item.single_price }}</view>
                <!-- <view class="first">首抽价</view> -->
              </view>
              <text class="old_price">￥{{ item.original_price }}</text>
            </view>
            <view class="xiaoliang">月销{{ item.sale_total }}笔</view>
          </view>
          <u-loadmore
            v-if="!isEmpty"
            height="80rpx"
            :status="status"
            icon-type="flower"
            color="#ccc"
            class="loadMore"
          />
        </view>
        <!-- 缺省页 -->
        <shopro-empty
          v-if="isEmpty"
          :image="
            $IMG_URL + '/uploads/20230527/9468a04c568f6b0c2d02a1f8958c370e.png'
          "
          tipText="搜索结果为空~"
        ></shopro-empty>
      </scroll-view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data: () => ({
    searchWord: '',
    current: 0,
    bar_style: {
      backgroundColor: '#A084F0',
    },
    active_item: {
      transform: 'scale(1.2)',
      fontFamily: 'PingFang SC-Regular, PingFang SC',
      fontWeight: '700',
    },
    firstList: [
      {
        name: '全部',
      },
      {
        name: '一番赏',
      },
      {
        name: '幸运福袋',
      },
      // {
      //   name: '指定款',
      // },
      // {
      //   name: '盲盒',
      // },
      // {
      //   name: '特殊',
      // },
    ],
    page: 1,
    rows: 10,
    activity_type: '',
    tag: 0,
    boxList: [],
    hisWord: [],
    hoverInput: false,
    showMore: true,
    status: 'loadmore',
    isEmpty: false,
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e) {
    if (e.type) {
      this.searchWord = decodeURI(e.type);
      this.hisWord = uni.getStorageSync('hisWord');
      this.getList();
    }
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    if (this.$Route.query.searchWord) {
      this.searchWord = this.$Route.query.searchWord;
      this.hisWord = uni.getStorageSync('hisWord');
      this.getList();
    }
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    searchHandle(word) {
      this.page = 1;
      this.boxList = [];
      this.setHisWord(word);
      this.getList();
      this.hoverInput = false;
    },
    change(index) {
      this.current = index;
      this.page = 1;
      this.boxList = [];
      switch (this.current) {
        case 1:
          this.activity_type = 1;
          break;
        case 2:
          this.activity_type = 2;
          break;
        case 3:
          this.activity_type = 3;
          break;
        case 4:
          this.activity_type = 4;
          break;
        case 5:
          this.activity_type = 5;
          break;
        default:
          this.activity_type = '';
          break;
      }
      this.getList();
    },
    getList() {
      return new Promise((resolve, reject) => {
        this.status = 'loading';
        this.$http('v1.activitysList', {
          tag: this.tag,
          page: this.page,
          rows: this.rows,
          text: this.searchWord,
          activity_type: this.activity_type,
        }).then((res) => {
          if (res.code === 1) {
            let { data } = res;
            this.status = data.list.length == 9 ? 'loadmore' : 'nomore';
            this.boxList = [...this.boxList, ...data.list];
            this.isEmpty = this.boxList.length == 0 ? true : false;
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    //将历史搜索存入本地
    setHisWord(word) {
      if (this.hisWord.indexOf(word) == -1) {
        this.hisWord.unshift(word);
        this.hisWord = this.hisWord.slice(0, 8);
        uni.setStorageSync('hisWord', this.hisWord);
      } else {
        this.hisWord.splice(this.hisWord.indexOf(word), 1);
        this.hisWord.unshift(word);
        this.hisWord = this.hisWord.slice(0, 8);
        uni.setStorageSync('hisWord', this.hisWord);
      }
    },
    jumpPage(e) {
      switch (e.activity_type) {
        case '1':
          uni.navigateTo({
            url: `/pages/rewardGoods/portrait/index?id=${e.id}`,
          });

          break;
        case '2':
          uni.navigateTo({
            url: `/pages/fukubukuro/extract/extract?id=${e.id}`,
          });
          break;
      }
    },
    // 加载更多
    loadMore() {
      this.page += 1;
      this.getList();
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.searchDetail {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  .inputSousuo {
    display: flex;
    align-content: center;
    align-items: center;
    background-color: #eef0f5;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 30px;
    height: 60rpx;
    width: 392rpx;
    border: 2rpx solid #9084f0;
    .sousuo_ico {
      width: 10%;
      margin-left: 28rpx;
      margin-right: 10rpx;
      color: #aeaeae;
      opacity: 1;
      font-size: 24rpx;
    }
    .sousuo_input {
      width: 90%;
      height: 60rpx;
      .input {
        height: 60rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #3d3d3d;
        text-align: left;
      }
    }
    .sousuo_cances {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      background-color: #9084f0;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
    }
  }
  .sousuo {
    display: flex;
    align-content: center;
    align-items: center;
    background-color: #eef0f5;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 30px;
    height: 60rpx;
    width: 392rpx;
    .sousuo_ico {
      width: 10%;
      margin-left: 28rpx;
      margin-right: 10rpx;
      color: #aeaeae;
      opacity: 1;
      font-size: 24rpx;
    }
    .sousuo_input {
      width: 90%;
      height: 60rpx;
      .input {
        height: 60rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #3d3d3d;
        text-align: left;
      }
    }
    .sousuo_cances {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      background-color: #9084f0;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
    }
  }
  .top_tab {
    padding-left: 36rpx;
    background-color: #fff;
    height: 60rpx;
  }
  .main {
    background-color: #fff;
    width: 100%;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: 20rpx;
    flex: 1;
    overflow: auto;
    margin-top: 10rpx;
    .scroll-box {
      .scroll {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
        align-content: flex-start;
        .box {
          width: 349rpx;
          height: 504rpx;
          display: flex;
          flex-direction: column;
          margin-top: 15rpx;
          background: #fff;
          border-radius: 30rpx;
          box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
          margin-bottom: 10rpx;
          .img {
            width: 349rpx;
            height: 324rpx;
            border-radius: 30rpx 30rpx 0 0;
          }
          .text {
            width: 309rpx;
            font-size: 28rpx;
            margin-left: 14rpx;
            margin-top: 11rpx;
            color: #000;
            text-overflow: ellipsis;
            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 2; /** 显示的行数 **/
            overflow: hidden; /** 隐藏超出的内容 **/
            height: 76rpx;
            font-family: PingFang SC-Heavy, PingFang SC;
            font-weight: 800;
          }
          .price {
            display: flex;
            justify-content: space-between;
            margin-left: 14rpx;
            margin-right: 14rpx;
            align-items: flex-end;
            .new_price {
              .bq {
                display: inline;
                font-size: 24rpx;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #fc3d18;
              }
              .jiage {
                color: #fc3d18;
                display: inline;
                font-size: 35rpx;
                font-family: DIN-Bold;
                font-weight: bold;
              }
              .first {
                font-size: 22rpx;
                color: #fc3d18;
                display: inline;
                font-family: Bahnschrift-Bold, Bahnschrift;
                font-weight: bold;
                margin-left: 2rpx;
              }
            }
            .old_price {
              text-decoration: line-through;
              font-size: 24rpx;
              font-family: DIN-Light;
              color: #8f8f8f;
            }
          }
          .xiaoliang {
            font-size: 20rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #8f8f8f;
            margin-top: 6rpx;
            margin-left: 16rpx;
          }
        }
        .loadMore {
          width: 100%;
        }
      }
    }
  }
}
</style>
